<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <!--导航-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" >
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Cool Admin</a>
          </div>
      
          
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span></span>&nbsp;后台首页</a></li>
                <li><a href="user_list.html"><span class="glyphicon glyphicon-user"></span></span>&nbsp;用户管理</a></li>
                <li><a href="content.html"><span class="glyphicon glyphicon-list-alt"></span></span>&nbsp;内容管理</a></li>
                <li><a href="tag.html"><span class="glyphicon glyphicon-tags"></span></span>&nbsp;标签管理</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                            <a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    admin
                              <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li><a href="index.html"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;前台首页</a></li>
                                <li><a href="index.html"><span class="glyphicon glyphicon-user"></span>&nbsp;个人主页</a></li>
                                <li><a href="index.html"><span class="glyphicon glyphicon-cog"></span>&nbsp;个个人设置</a></li>
                                <li><a href="index.html"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;个账户中心</a></li>
                                <li><a href="index.html"><span class="glyphicon glyphicon-heart"></span>&nbsp;个我的收藏</a></li>
                            </ul>
                        </li>
                <li><a href="#home"><span class="glyphicon glyphicon-off"></span>&nbsp;退出</a></li>
            </ul>    
          </div>
        </div>
    </nav>

      <!--警告-->
    <div class="container">
      <div class="row">
          <!--警告-->
            <div class="col-md-12">
                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4>网站程序有漏洞，继续修复！</h4>
                    <p>当前程序版本（V1.22）存在安全问题，容易造成攻击，请立即修复</p>
                    <p>
                      <button type="button" class="btn btn-danger">立即修复</button>
                      <button type="button" class="btn btn-default" data-dismiss="alert">稍后处理</button>
                    </p>
                  </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">网站统计数据</div>
                    <div class="panel-body">
                      <table class="table table-hover">
                        <thead>
                          <tr>
                            <th>统计项目</th>
                            <th>今日</th>
                            <th>昨日</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">注册会员</th>
                            <td>200</td>
                            <td>300</td>
                          </tr>
                          <tr>
                            <th scope="row">登录会员</th>
                            <td>4200</td>
                            <td>4300</td>
                          </tr>
                          <tr>
                            <th scope="row">今日发帖</th>
                            <td>2200</td>
                            <td>3200</td>
                          </tr>
                          <tr>
                            <th scope="row">今日转载</th>
                            <td>220</td>
                            <td>3200</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">网站热帖</div> 
                      <ul class="list-group">
                        <li class="list-group-item">
                          <a href="index.html">小米MIX3曝光 “真”全面屏似乎还能滑屏售2500元内? <small class="pull-right">2018/8</small></a>
                        </li>  
                        <li class="list-group-item">
                            <a href="index.html">世界手机S1颠覆了我们以往的哪些认知? <small class="pull-right">2018/8</small></a>
                        </li class="list-group-item">
                        <li class="list-group-item">
                            <a href="index.html">黄章在论坛又爆料了,魅族16 X <small class="pull-right">2018/8</small></a>
                        </li>
                        <li class="list-group-item">
                            <a href="index.html">比小米8还强,小米MIX3遭曝光,全面屏3.0,重新定义全面屏 <small class="pull-right">2018/8</small></a>
                        </li>
                        <li class="list-group-item">
                            <a href="index.html">比小米8还强,小米MIX3遭曝光,全面屏3.0,重新定义全面屏 <small class="pull-right">2018/8</small></a>
                        </li>
                        <li class="list-group-item">
                            <a href="index.html">比小米8还强,小米MIX3遭曝光,全面屏3.0,重新定义全面屏 <small class="pull-right">2018/8</small></a>
                        </li>
                        
                        
                          
                        
                        
                      </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">今日访客统计</div>
                    <div class="panel-body">
                      <canvas id="canvas" class="col-md-12"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">服务器状态</div>
                    <div class="panel-body">
                        <p>内存使用率: 40%</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                              <span class="sr-only">40% Complete (success)</span>
                            </div>
                          </div>
                          <p>数据使用率: 20%</p>
                          <div class="progress">
                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                              <span class="sr-only">20% Complete</span>
                            </div>
                          </div>
                          <p>磁盘使用率: 60%</p>
                          <div class="progress">
                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                              <span class="sr-only">60% Complete (warning)</span>
                            </div>
                          </div>
                          <p>CPU使用率: 80%</p>
                          <div class="progress">
                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                              <span class="sr-only">80% Complete (danger)</span>
                            </div>
                          </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default">
                  <div class="panel-heading">团队留言板</div>
                  <div class="panel-body">
                    <div class="col-md-7">
                        <div class="media well">
                            <div class="media-left">
                              <a href="#">
                                <img class="media-object wh64" src="images/a.png" alt="卓大哥">
                              </a>
                            </div>
                            <div class="media-body">
                              <h4 class="media-heading">卓大哥</h4>
                              技术大哥，今晚请把网站程序升级一下，现在有漏洞，安全起见！
                            </div>
                          </div>
                          <div class="media well">
                              
                              <div class="media-body text-right">
                                <h4 class="media-heading">李大哥</h4>
                                收到，今晚2点准时升级！
                              </div>
                              <div class="media-right">
                                  <a href="#">
                                    <img class="media-object  wh64" src="images/b.png" alt="李大哥">
                                  </a>
                                </div>
                            </div>
                            <div class="media well">
                                
                                <div class="media-body text-right">
                                  <h4 class="media-heading">李大哥</h4>
                                  你现在站点发布更新信息！
                                </div>
                                <div class="media-right">
                                    <a href="#">
                                      <img class="media-object  wh64" src="images/b.png" alt="李大哥">
                                    </a>
                                  </div>
                              </div>
                            <div class="media well">
                                <div class="media-left">
                                  <a href="#">
                                    <img class="media-object  wh64" src="images/a.png" alt="卓大哥">
                                  </a>
                                </div>
                                <div class="media-body">
                                  <h4 class="media-heading">卓大哥</h4>
                                  好嘞
                                </div>
                              </div>
                    </div>
                    <div class="col-md-5">
                      <form action="#">
                        <div class="form-group">
                          <label for="text1">输入留言内容</label>
                          <textarea class="form-control" id="text1" rows="5" cols="10" placeholder="请输入留言内容"></textarea>
                          <button type="submit" class="btn btn-default mar_10">留言</button>
                        </div>
                      </form>
                      <div class="panel panel-default">
                        <div class="panel-heading">团队联系手册</div>
                        <div class="panel-body">
                          <ul class="list-group">
                            <li class="list-group-item">站长: <span class="glyphicon glyphicon-phone"></span>&nbsp;1234564</li>
                            <li class="list-group-item">技术: <span class="glyphicon glyphicon-phone"></span>34234564</li>
                            <li class="list-group-item">推广: <span class="glyphicon glyphicon-phone"></span>134534564</li>
                            <li class="list-group-item">客服: <span class="glyphicon glyphicon-phone"></span>12334564</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
      </div>
    </div>

   
       <!--footer-->
    <footer>

        
    </footer>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/Chart.js"></script>
    <script src="js/script.js"></script>
</body>
</html>